import {
  getErrorReportByPage,
  getReportformsWorkOrderInforByPage,
  getReportformsPlantCapacityCalendarByPage,
  getReportformsPlantCapacityCalendarByPage2,
  getReportformsPickingTaskByPage,
  getReportformsProductManufactInforExecuteByPage,
  getReportformsCabinetQuality,
  getReportformsCustomComplaint,
  getReportformsWorkOrderInforByPage2,
  getReportformsCustomComplaint2,
} from '@/services/board/reportForm';
import { PageContainer } from '@ant-design/pro-components';
import { Modal, Tooltip, Spin, Button } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useIntl } from 'umi';
import './card_style.less';
import { Pie, Line, G2 } from '@ant-design/charts'; //饼状图,折线图
import { QuestionCircleOutlined } from '@ant-design/icons'; //问号组件

const ReportForm: React.FC = () => {
  const [open1, setOpen1] = useState(false); //异常原因统计Modal
  const [open2, setOpen2] = useState(false); //生产交货能力Modal
  const [open3, setOpen3] = useState(false); //生产计划达成率Modal
  const [open4, setOpen4] = useState(false); //个人生产力及效率Modal
  const [open5, setOpen5] = useState(false); //客户投诉缺陷率Modal
  const [open6, setOpen6] = useState(false); //物料、生产文件齐套率Modal
  const [open7, setOpen7] = useState(false); //线路故障率Modal
  const [loading, setLoading] = useState(true); //数据是否加载成功
  const [causeStatisticsData, setCauseStatisticsData] = useState(); //异常原因统计数据
  const [reportformsDeliveryCapacity, setReportformsDeliveryCapacity] = useState(); //生产交货能力数据
  const [reportformsPlantCapacityCalendar, setReportformsPlantCapacityCalendar] = useState(); //小组生产力数据
  const [reportformsPlantCapacityCalendar2, setReportformsPlantCapacityCalendar2] = useState(); //小组生产率数据
  const [reportformsPickingTask, setReportformsPickingTask] = useState(); //物料齐套率数据
  const [ReportformsWorkOrderInfor, setReportformsWorkOrderInfor] = useState(); //生产文件齐套率数据
  const [reportformsProductManufactInforExecute, setReportformsProductManufactInforExecute] =
    useState(); //生产计划达成率数据
  const [reportformsCabinetQuality, setReportformsCabinetQuality] = useState(); //线路故障率数据
  const [reportformsCustomComplaint, setReportformsCustomComplaint] = useState(); //客户投诉缺陷率数据
  const [ReportformsCustomComplaint2, setReportformsCustomComplaint2] = useState(); //客户投诉率数据
  const formatter = (value) => {
    // 在这里定义自定义的格式化逻辑
    return `${value}%`;
  };
  const reportFormTag = [
    '异常原因统计',
    '生产交货能力',
    '生产计划达成率',
    '个人(小组)生产力及效率',
    '客户投诉缺陷率',
    '物料与文件齐套生产率',
    '线路故障率',
  ]; //报表所有栏目名称
  //异常原因统计配置
  const config1 = {
    appendPadding: 10,
    data: causeStatisticsData,
    angleField: 'value',
    colorField: 'name',
    radius: 1,
    label: {
      type: 'spider',
      labelHeight: 60,
      content: '{name}\n{percentage}',
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  };
  //生产交货能力配置
  const config2 = {
    forceFit: true,
    padding: 'auto',
    data: reportformsDeliveryCapacity,
    xField: 'month',
    yField: 'value',
    point: { visible: true },
    label: {
      visible: true,
      type: 'point',
    },
    color: '#13c2c2',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsDeliveryCapacity) => {
        return { name: '生产交货能力', value: datum.value + '%' };
      },
    },
  };
  //生产计划达成率配置
  const config3 = {
    data: reportformsProductManufactInforExecute,
    xField: 'month',
    yField: 'value',
    seriesField: 'name',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsProductManufactInforExecute) => {
        return { name: datum.name, value: datum.value + '%' };
      },
    },
  };
  //个人(小组)生产力及效率
  const config4 = {
    data: reportformsPlantCapacityCalendar,
    xField: 'month',
    yField: 'value',
    seriesField: 'name',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsPlantCapacityCalendar) => {
        return { name: datum.name, value: datum.value + '%' };
      },
    },
  };
  const config5 = {
    data: reportformsPlantCapacityCalendar2,
    xField: 'month',
    yField: 'value',
    seriesField: 'name',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsPlantCapacityCalendar2) => {
        return { name: datum.name, value: datum.value + '%' };
      },
    },
  };
  //客户投诉缺陷率配置
  const config6 = {
    forceFit: true,
    padding: 'auto',
    data: reportformsCustomComplaint,
    xField: 'month',
    yField: 'value',
    point: { visible: true },
    label: {
      visible: true,
      type: 'point',
    },
    color: 'red',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsCustomComplaint) => {
        return { name: '客户投诉缺陷率', value: datum.value + '%' };
      },
    },
  };
  //客户投诉率配置
  const config7 = {
    forceFit: true,
    padding: 'auto',
    data: ReportformsCustomComplaint2,
    xField: 'month',
    yField: 'value',
    point: { visible: true },
    label: {
      visible: true,
      type: 'point',
    },
    color: 'red',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: ReportformsCustomComplaint2) => {
        return { name: '客户投诉率', value: datum.value + '%' };
      },
    },
  };
  //物料齐套生产率配置
  const config8 = {
    forceFit: true,
    padding: 'auto',
    data: reportformsPickingTask,
    xField: 'month',
    yField: 'value',
    point: { visible: true },
    label: {
      visible: true,
      type: 'point',
    },
    color: '#13c2c2',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsPickingTask) => {
        return { name: '物料齐套生产率', value: datum.value + '%' };
      },
    },
  };
  //文件齐套生产率配置
  const config9 = {
    forceFit: true,
    padding: 'auto',
    data: ReportformsWorkOrderInfor,
    xField: 'month',
    yField: 'value',
    point: { visible: true },
    label: {
      visible: true,
      type: 'point',
    },
    color: '#13c2c2',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: ReportformsWorkOrderInfor) => {
        return { name: '文件齐套生产率', value: datum.value + '%' };
      },
    },
  };
  //线路故障率配置
  const config10 = {
    forceFit: true,
    padding: 'auto',
    data: reportformsCabinetQuality,
    xField: 'month',
    yField: 'value',
    point: { visible: true },
    label: {
      visible: true,
      type: 'point',
    },
    color: '#13c2c2',
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: formatter,
      },
    },
    tooltip: {
      formatter: (datum: reportformsCabinetQuality) => {
        return { name: '线路故障率', value: datum.value + '%' };
      },
    },
  };
  //取消查看Modal的弹窗
  const handleCancel = () => {
    setOpen1(false);
    setOpen2(false);
    setOpen3(false);
    setOpen4(false);
    setOpen5(false);
    setOpen6(false);
    setOpen7(false);
    setLoading(true);
  };
  //点击查看报表Modal的弹窗
  const openLookfor = async (index: number) => {
    if (index == 0) {
      console.log('打开1号窗口');
      setOpen1(true);
      //获取异常原因统计数据
      const reportFormInfo = await getErrorReportByPage();
      console.log('reportFormInfo:', reportFormInfo);
      setCauseStatisticsData(reportFormInfo.data.varList);
      setLoading(false);
    }
    if (index == 1) {
      console.log('打开2号窗口');
      setOpen2(true);
      const reportFormInfo = await getReportformsWorkOrderInforByPage();
      // 重构对象数组
      const newReportFormInfo = [];
      reportFormInfo?.data?.map((item: any, index: any) => {
        if (index != 12) {
          newReportFormInfo.push({ value: item, month: index + 1 + '月' });
        }
      });
      setReportformsDeliveryCapacity(newReportFormInfo);
      setLoading(false);
    }
    if (index == 2) {
      console.log('打开3号窗口');
      setOpen3(true);
      const reportFormInfo = await getReportformsProductManufactInforExecuteByPage();
      //重构对象数组
      const newReportFormInfo = [];
      reportFormInfo.data.series.map((item1) => {
        item1.data.map((item2, index) => {
          if (index != 12) {
            newReportFormInfo.push({
              value: item2,
              name: item1.name,
              month: index + 1 + '月',
            });
          }
        });
      });
      setReportformsProductManufactInforExecute(newReportFormInfo);
      setLoading(false);
    }
    if (index == 3) {
      console.log('打开4号窗口');
      setOpen4(true);
      const reportFormInfo1 = await getReportformsPlantCapacityCalendarByPage();
      const reportFormInfo2 = await getReportformsPlantCapacityCalendarByPage2();
      //重构对象数组
      const newReportFormInfo = [];
      reportFormInfo1.data.series.map((item1) => {
        item1.data.map((item2, index) => {
          if (index != 12) {
            newReportFormInfo.push({
              value: item2,
              name: item1.name,
              month: index + 1 + '月',
            });
          }
        });
      });
      setReportformsPlantCapacityCalendar(newReportFormInfo);
      reportFormInfo2.data.series.map((item1) => {
        item1.data.map((item2, index) => {
          if (index != 12) {
            newReportFormInfo.push({
              value: item2,
              name: item1.name,
              month: index + 1 + '月',
            });
          }
        });
      });
      setReportformsPlantCapacityCalendar2(newReportFormInfo);
      setLoading(false);
    }
    if (index == 4) {
      console.log('打开5号窗口');
      setOpen5(true);
      const reportFormInfo1 = await getReportformsCustomComplaint();
      const reportFormInfo2 = await getReportformsCustomComplaint2();
      //重构对象数组
      const newReportFormInfo1 = [];
      reportFormInfo1.data.map((item, index) => {
        if (index != 12) {
          newReportFormInfo1.push({
            value: item,
            month: index + 1 + '月',
          });
        }
      });
      setReportformsCustomComplaint(newReportFormInfo1);
      const newReportFormInfo2 = [];
      reportFormInfo2.data.map((item, index) => {
        if (index != 12) {
          newReportFormInfo2.push({
            value: item,
            month: index + 1 + '月',
          });
        }
      });
      setReportformsCustomComplaint2(newReportFormInfo2);
      setLoading(false);
    }
    if (index == 5) {
      console.log('打开6号窗口');
      setOpen6(true);
      const reportFormInfo1 = await getReportformsPickingTaskByPage();
      const reportFormInfo2 = await getReportformsWorkOrderInforByPage2();
      console.log(reportFormInfo1, reportFormInfo2);

      //重构对象数组
      const newReportFormInfo1 = [
        { value: 0, month: '1月' },
        { value: 0, month: '2月' },
        { value: 0, month: '3月' },
        { value: 0, month: '4月' },
        { value: 0, month: '5月' },
        { value: 0, month: '6月' },
        { value: 0, month: '7月' },
        { value: 0, month: '8月' },
        { value: 0, month: '9月' },
        { value: 0, month: '10月' },
        { value: 0, month: '11月' },
        { value: 0, month: '12月' },
      ];
      reportFormInfo1?.data.map((item) => {
        newReportFormInfo1.map((itemNew) => {
          if (itemNew.month == item.Fmonth + '月') {
            itemNew.value = item.Fpecent;
          }
        });
      });
      setReportformsPickingTask(newReportFormInfo1);
      const newReportFormInfo2 = [
        { value: 0, month: '1月' },
        { value: 0, month: '2月' },
        { value: 0, month: '3月' },
        { value: 0, month: '4月' },
        { value: 0, month: '5月' },
        { value: 0, month: '6月' },
        { value: 0, month: '7月' },
        { value: 0, month: '8月' },
        { value: 0, month: '9月' },
        { value: 0, month: '10月' },
        { value: 0, month: '11月' },
        { value: 0, month: '12月' },
      ];
      reportFormInfo2?.data.map((item) => {
        newReportFormInfo2.map((itemNew) => {
          if (itemNew.month == item.Fmonth + '月') {
            itemNew.value = item.Fpecent;
          }
        });
      });
      setReportformsWorkOrderInfor(newReportFormInfo2);
      console.log(newReportFormInfo2);
      setLoading(false);
    }
    if (index == 6) {
      console.log('打开7号窗口');
      setOpen7(true);
      const reportFormInfo = await getReportformsCabinetQuality();
      console.log(reportFormInfo);
      //重构对象数组
      const newReportFormInfo = [];
      reportFormInfo.data.map((item, index) => {
        if (index != 12) {
          newReportFormInfo.push({
            value: item,
            month: index + 1 + '月',
          });
        }
      });
      setReportformsCabinetQuality(newReportFormInfo);
      setLoading(false);
    }
  };
  //组件条件渲染
  const ConditionalComponent = ({ condition, component }) => {
    return condition ? null : component;
  };
  return (
    <>
      <div>
        {
          reportFormTag.map((item, index) => (
            <Button type='link' key={`reportLink-${index}`} onClick={(e) => { openLookfor(index) }}>
              { item }
            </Button>
          ))
        }
      </div>

      {/* 这是异常原因统计弹窗 */}
      <Modal
        open={open1}
        title="异常原因统计"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>异常原因统计</h1>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Pie {...config1} />}
             />
          </Spin>
        </div>
      </Modal>
      {/* 这是生产交货能力弹窗 */}
      <Modal
        open={open2}
        title="生产交货能力"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>生产交货能力</h1>
            <Tooltip title="准时交货柜体数量/计划交付柜体总数" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config2} />}
             />
          </Spin>
        </div>
      </Modal>
      {/* 这是生产计划达成率弹窗 */}
      <Modal
        open={open3}
        title="生产计划达成率"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>生产计划达成率</h1>
            <Tooltip title="各工序实际生产日期/计划日期" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config3} />}
             />
          </Spin>
        </div>
      </Modal>
      {/* 这是个人(小组)生产率及效率弹窗 */}
      <Modal
        open={open4}
        title="个人(小组)生产率及效率"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>个人(小组)生产力</h1>
            <Tooltip title="实际工时/应出勤工时(8小时定值计算(不包括加班出勤))" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config4} />}
             />
          </Spin>
        </div>
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>个人(小组)生产率</h1>
            <Tooltip title="实际工时/应出勤工时(8小时定值计算(不包括加班出勤))" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config5} />}
             />
          </Spin>
        </div>
      </Modal>
      {/* 这是客户投诉率弹窗 */}
      <Modal
        open={open5}
        title="客户投诉率"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>客户投诉缺陷率</h1>
            <Tooltip title="客户投诉缺陷点/生产车间月度实际工时总数/1000" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config6} />}
             />
          </Spin>
        </div>
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>客户投诉率</h1>
            <Tooltip title="客户投诉缺陷点/生产车间月度实际工时总数/1000" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config7} />}
             />
          </Spin>
        </div>
      </Modal>
      {/* 这是物料与文件齐套生产率弹窗 */}
      <Modal
        open={open6}
        title="物料与文件齐套生产率"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>物料齐套生产率</h1>
            <Tooltip title="开工时物料产套订单数/总订单数" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config8} />}
             />
          </Spin>
        </div>
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>文件齐套生产率</h1>
            <Tooltip title="开工时文件产套订单数/总订单数" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config9} />}
             />
          </Spin>
        </div>
      </Modal>
      {/* 这是线路故障率弹窗 */}
      <Modal
        open={open7}
        title="线路故障率"
        destroyOnClose
        width={1000}
        onCancel={handleCancel}
        footer={[]}
      >
        <div className="reportFormModalContainer">
          <div className="reportFormModalTitle">
            <h1>线路故障率</h1>
            <Tooltip title="接线缺陷总数/接线总数" placement="left">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <Spin spinning={loading}>
            <ConditionalComponent
              condition={loading}
              component={<Line {...config10} />}
             />
          </Spin>
        </div>
      </Modal>
    </>
  );
};
export default ReportForm;
